<template>
    <view class="container">
        <view class="header">
            <tn-navbar title="复选框组件示例"></tn-navbar>
        </view>
        
        <view class="demo-section">
            <view class="section-title">基础用法</view>
            <checkbox-group
                v-model="checkboxValues"
                :options="basicOptions"
            />
            <view class="result-display">
                <view class="result-title">选中的值：</view>
                <view class="result-content">
                    <text>药品附件: {{checkboxValues.drugAttachment === '1' ? '是' : '否'}}</text>
                    <text>质检报告: {{checkboxValues.qualityReport === '1' ? '是' : '否'}}</text>
                    <text>业务合同: {{checkboxValues.businessContract === '1' ? '是' : '否'}}</text>
                    <text>公司资质: {{checkboxValues.companyQualification === '1' ? '是' : '否'}}</text>
                    <text>单品手续: {{checkboxValues.singleItemProcedure === '1' ? '是' : '否'}}</text>
                </view>
            </view>
        </view>

        <view class="demo-section">
            <view class="section-title">自定义配置示例</view>
            <checkbox-group
                v-model="customValues"
                :options="customOptions"
            />
            <view class="result-display">
                <view class="result-title">选中的值：</view>
                <view class="result-content">
                    <text v-for="(value, key) in customValues" :key="key">
                        {{key}}: {{value === '1' ? '是' : '否'}}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import CheckboxGroup from '@/components/business/CheckboxGroup.vue'

// 基础示例数据
const basicOptions = [
    { label: "药品附件", value: "drugAttachment" },
    { label: "质检报告", value: "qualityReport" },
    { label: "业务合同", value: "businessContract" },
    { label: "公司资质", value: "companyQualification" },
    { label: "单品手续", value: "singleItemProcedure" }
]
const checkboxValues = ref({})

// 自定义示例数据
const customOptions = [
    { label: "发送短信通知", value: "smsNotification" },
    { label: "需要发票", value: "needInvoice" },
    { label: "加急处理", value: "urgent" },
    { label: "特殊包装", value: "specialPackage" }
]
const customValues = ref({})

</script>

<style scoped>
.container {
    padding: 20px;
}

.demo-section {
    margin-bottom: 30px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.result-display {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
}

.result-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.result-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-content text {
    color: #666;
}
</style> 